<template>
  <div class="line">
    <canvas canvas-id="canvasId" id='canvasId'/>
  </div>
</template>

<script>

import logo from "../../../assets/img/logo.png"

export default {
  data(){
    return {

    }
  },
  mounted(){
    this.drawLine()
  },
  methods:{
    drawLine(){

      const lineCon = document.querySelector('.line')

      const canvas = document.querySelector('#canvasId')
      canvas.width = lineCon.clientWidth
      canvas.height = lineCon.clientHeight
      // canvas.setAttribute('width', 400);
      // canvas.setAttribute('height', 400);
      const cvsCtx = canvas.getContext('2d')

      cvsCtx.beginPath();
      cvsCtx.moveTo(0, 0);
      cvsCtx.lineTo(100, 100);
      cvsCtx.lineWidth = 5;
      //线条样式 两端圆角等
      // cvsCtx.lineCap="round";
      // cvsCtx.lineCap="square";
      cvsCtx.strokeStyle = "#ff0000";
      // 下面的 beginPath 会自定补在前面一个closePath，所以不用写
      // cvsCtx.closePath(); 
      cvsCtx.stroke();


      cvsCtx.beginPath();
      // 线段转角 交点，设置为圆角 
      // cvsCtx.lineJoin="round";
      cvsCtx.strokeRect(200, 200, 50, 50);
      
      cvsCtx.beginPath();
      cvsCtx.fillStyle = "#00ff00";
      cvsCtx.fillRect(100, 10, 40, 40);

      cvsCtx.beginPath();
      // x y r 起始位置 结束位置 是否是逆时针
      cvsCtx.arc(200, 10, 50, 0, Math.PI/2, false);
      cvsCtx.fillStyle = '#0000ff'
      // 先 填充
      cvsCtx.fill()
      // 再 描边
      cvsCtx.stroke()

      cvsCtx.beginPath();
      // 矩形渐变色 x y endx endy
      var grd=cvsCtx.createLinearGradient(0,0,170,0);
      grd.addColorStop(0,"red");
      grd.addColorStop("0.5","yellow");
      grd.addColorStop(1,"green");
      cvsCtx.strokeStyle = grd
      cvsCtx.moveTo(10, 30);
      cvsCtx.lineTo(130, 150);
      cvsCtx.stroke()


      cvsCtx.beginPath();
      // 剪切矩形区域（只有在这个区域才会显示）
      cvsCtx.rect(300,120,200,120);

      // 也可以 圆形裁剪
      // cvsCtx.arc(500,120,200,0,Math.PI*2);

      // 也可以 不规则裁剪
      // cvsCtx.moveTo(300,120)
      // cvsCtx.lineTo(500,120)
      // cvsCtx.lineTo(500,240)
      // cvsCtx.lineTo(400,240)
      // cvsCtx.lineTo(300,120)
      cvsCtx.stroke();
      // 裁剪前保存以前的状态（裁剪后 restore 恢复，否则其他地方绘制不出内容了）
      cvsCtx.save()
      cvsCtx.clip();
      // 在 clip() 之后绘制绿色矩形
      cvsCtx.fillStyle="green";
      cvsCtx.fillRect(250,100,150,100);
      // x 250-300
      // y 100-120 不在裁剪区域内，所以不显示

      //恢复
      cvsCtx.restore() 

      cvsCtx.moveTo(20, 70);
      cvsCtx.lineTo(130, 170);
      cvsCtx.stroke()
      
      var img = new Image()
      // 本地图片需要import引入，直接写地址不行
      // img.src = '../../../static/img/logo.png';
      img.src = logo;
      // img.src = "https://www.twle.cn/static/i/meimei_160x160.png";

      // 画布位置 和 图片宽高（可能会压缩）
      // cvsCtx.drawImage(img,x,y);
      // cvsCtx.drawImage(img,x,y,width,height);

      // 裁剪 s ，裁剪位置和宽高，画布位置和宽高（只要宽高相等就不会压缩）
      // cvsCtx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

      // 绘制视频
      // var v=document.getElementById("video1");
      // v.addEventListener('play',() => {
      //   var i = window.setInterval(() => {
      //     cvsCtx.drawImage(v,0,0,270,135)
      //   },20);
      // },false);
      // v.addEventListener('pause',() => {
      //   window.clearInterval(i);
      // },false);
      // v.addEventListener('ended',() => {
      //   clearInterval(i);
      // },false);

      img.onload = function(e){
        cvsCtx.drawImage(img,0,200,180,180);
        // cvsCtx.drawImage(img,30,30,100,100,0,200,180,180);
      }

      // 绘制文字 阴影
      // cvsCtx.setFontSize("30px");
      cvsCtx.font = '40px Arial'
      // 设置文字X轴坐标值的意义（right，end，center） ，500 是文字的右值
      cvsCtx.textAlign="right";
      // 设置文字Y轴坐标值的意义 文字的基准线 ， 40 是文字的top值
      cvsCtx.textBaseline="top";

      cvsCtx.fillStyle = 'pink'
      //阴影
      cvsCtx.shadowColor = 'black'
      // 阴影模糊度
      cvsCtx.shadowBlur = 10
      // 阴影偏移
      cvsCtx.shadowOffsetX=20;
      cvsCtx.shadowOffsetY=-5;

      cvsCtx.fillText("这是一段测试文字",700,40);

      cvsCtx.lineWidth = 2
      cvsCtx.strokeText("这是一段测试文字",700,80);

      // measureText 检查文本宽度
      // let res = cvsCtx.measureText("这是一段测试文字")
      // console.log(res)
      // const r_width = res.width



      //像素
      // 清空一块区域
      cvsCtx.clearRect(500,200,200,200)
      var imgData=cvsCtx.createImageData(100,100);
      
      //自己造像素点
      for (var i=0;i<imgData.data.length;i+=4){
        imgData.data[i+0]=255;
        imgData.data[i+1]=0;
        imgData.data[i+2]=0;
        imgData.data[i+3]=255;
      }
      cvsCtx.putImageData(imgData,500,200);

      // 获取其他位置的像素点
      var getData=cvsCtx.getImageData(0,0,100,100);
      cvsCtx.putImageData(getData,600,300);

      // 全局透明度
      // cvsCtx.globalAlpha=0.2;
      
      // 两个矩形 
      // source-over 后面的在上层
      // cvsCtx.globalCompositeOperation="source-over";
      // destination-over 在下层
      // cvsCtx.globalCompositeOperation="destination-over";
    }
  }
}
</script>

<style lang="scss" scoped>

.line {
  width: 100%;
  height: 100%;
  min-height: 500px;
  canvas{
    margin: 0 auto;
    border: 1px solid #ccc;
  }
}
</style>